<template>
    <div class="mallDetailsPerfecth5Wrapper">
        <div class="tradeContentWrapper">
            <div class="goodsInfo">
                <div class="imgBox">
                    <img :src="imgUrl" alt="">
                </div>
                <div class="goods">
                    <p class="title">{{title}}</p>
                    <p class="discount">&yen;{{discount}}</p>
                </div>
            </div>
            <div class="skuInfo">
                <span>已选规格</span>
                <span class="skuDetail">{{sku}}；数量{{num}}</span>
            </div>
        </div>
        <div class="addressWrapper">
            <div class="formItem">
                <label>收货人</label>
                <input type="text" placeholder="请输入" v-model="receiveName">
            </div>
            <div class="formItem">
                <label>联系电话</label>
                <input type="text" placeholder="请输入" v-model="receiveTelephone">
            </div>
            <div class="formItem">
                <label>省市区</label>
                <input type="text" placeholder="请选择" v-model="pickText" @click="toAddress" readonly>
            </div>
            <div class="formItem">
                <textarea placeholder="填写详细地址" v-model="receiveAddress" maxlength="120"></textarea>
            </div>
        </div>
        <div class="feeWrapper">
            <div class="pItem">
                <div class="label">运费</div>
                <div class="content">&yen;{{postFee}}</div>
            </div>
            <div class="pItem">
                <div class="label">总计费用</div>
                <div class="content">&yen;{{totalMoney}}</div>
            </div>
        </div>
        <div class="totalInfoWrapper">
            <div class="info">共计：{{totalMoney}}元</div>
            <div class="confirmTrade" @click="confirmTrade">去结账</div>
        </div>
        
        <div class="layerMaskPopup" v-if="payMoneyShow">
            <div class="payMoneyTrue" catchtouchmove="preventTouchMove">
                <div class="payMoneyOne">支付</div>
                <div class="payMoneyTwo">需要支付</div>
                <div class="payMoneyThree">{{totalMoney}} <span style="font-size: .28rem;">元</span> </div>
                <div class="payMoneyFive">
                    <div class="icon-payMoneyFourTrue" :class="{'iconTrueColor':colorNum==2}">&#xe646;</div>
                    <div class="icon-payMoneyFive">&#xe601;</div>
                    <div class="payMoneyFiveMoney">微信支付</div>
                </div>
                <div class="payMoneyOkBtn" @click="toPayMoney">确定支付</div>
            </div>
        </div>
        <picker ref="areaPicker" :showArea='showArea' :provId="provId" :cityId="cityId" :areaId="areaId" @changePicker="areaChange" @cancelPicker="cancelPicker"></picker>
        <div class="toast" v-show="toastShow">
        {{toastText}}
        </div>
    </div>
</template>

<script>
import {ajax, tradeOrderDetail, getAddressInfo, getH5TradePostFee, compeleteH5OrderInfo, getWxPayInfo} from '../../data/wap-service'
import picker from '@/components/picker'

export default {
    components:{
        picker
    },

    mixins:[ajax],

    data(){
        return {
            payMoneyShow: false,
            colorNum: 2,
            tradeCode: '',
            imgUrl: '',
            title: '',
            discount: '0.00',
            money: '0.00',
            vipDiscount: '0.00',
            vipDiscountNum: '',
            dutiesName: '',
            sku: '',
            num: '',
            postFee: '0.00',
            receiveName: '',
            receiveTelephone: '',
            receiveAddress: '',
            provId: '',
            provName: '',
            cityId: '',
            cityName: '',
            areaId: '',
            areaName: '',
            pickText: '',

            appId: '',
            prepayId:'',
            paySign: '',
            nonceStr: '',
            timeStamp: '',

            showArea: false,
            toastShow: false,
            toastText: ''
        }
    },

    created(){
        this.tradeCode = this.$route.params.tradeCode;
        this.getTradeInfo();
        this.getAddressInfo();
    },

    computed:{
        totalMoney(){
            return (parseFloat(this.money) + parseFloat(this.postFee)).toFixed(2)
        }
    },

    methods:{
        toAddress(){
            this.showArea = true;
            this.$refs.areaPicker.pickerCallback();
        },

        cancelPicker(){
            this.showArea = false
        },

        areaChange(data){
            for(let key in data){
                this[key] = data[key]
            }
            if(this.provName && this.cityName && this.areaName){
                this.pickText = this.provName + '-' + this.cityName + '-' + this.areaName
            }     
            if(this.provId){
                this.getPostFee()
            }
        },

        getPostFee(){
            this.doajax(getH5TradePostFee, {provId: this.provId, tradeCode:this.tradeCode}, res => {
                this.postFee = res.postFee;
            })
        },

        getTradeInfo(){
            this.doajax(tradeOrderDetail, {tradeCode: this.tradeCode}, (res) => {
                this.imgUrl = res.imgUrl;
                this.title = res.title;
                this.discount = res.discount;
                this.sku = res.sku;
                this.num = res.num;
                this.money = res.money;
            })
        },

        getAddressInfo(){
            this.doajax(getAddressInfo, {}, res => {
                this.receiveName = res.receiveName || '';
                this.receiveTelephone = res.receiveTelephone || '';
                this.provName = res.provName || '';
                this.provId = res.provId || '';
                this.cityName = res.cityName || '';
                this.cityId = res.cityId || '';
                this.areaName = res.areaName || '';
                this.areaId = res.areaId || '';
                this.receiveAddress = res.receiveAddress || '';
                if(this.provName && this.cityName && this.areaName){
                    this.pickText = this.provName + '-' + this.cityName + '-' + this.areaName
                }
            })
        },

        confirmTrade(){
            if(!this.receiveName || !this.receiveTelephone || !this.receiveAddress || !this.provId){
                return this.toast('请完善地址')
            }
            this.doajax(compeleteH5OrderInfo, {
                receiveName: this.receiveName,
                receiveTelephone: this.receiveTelephone,
                provId: this.provId,
                cityId: this.cityId,
                areaId: this.areaId,
                receiveAddress: this.receiveAddress,
                tradeCode: this.tradeCode
            }, res => {
                this.payMoneyShow = true
            })
        },

        toPayMoney(){
            this.doajax(getWxPayInfo, {tradeCode: this.tradeCode}, res => {
                this.appId = res.appId;
                this.prepayId = res.prepayId;
                this.paySign = res.paySign;
                this.nonceStr = res.nonceStr;
                this.timeStamp = res.timeStamp;
                this.weixinPay()
            })
        },

        weixinPay(){
            var vm= this;
            if (typeof WeixinJSBridge === "undefined"){//微信浏览器内置对象。参考微信官方文档
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(), false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady());
                    document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady());
                }
            }else{
                vm.onBridgeReady();
            }
        },

        toast(str) {
            let v = this
            v.toastText = str
            v.toastShow = true
            setTimeout(function(){
                v.toastShow = false
            }, 1500)

        },
        onBridgeReady() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    appId: this.appId,
                    timeStamp: this.timeStamp,
                    nonceStr: this.nonceStr,
                    package: "prepay_id=" + this.prepayId,
                    signType: "MD5",
                    paySign: this.paySign
                }, (res) => {
                    if(res.err_msg === "get_brand_wcpay_request:ok" ){
                        this.$router.push({path:'/share/mallPayMoneyOk'});
                    }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
                        this.toast("支付取消");
                    }else if(res.err_msg === 'get_brand_wcpay_request:fail'){
                        this.toast("支付失败");
                    }else{
                        this.toast('支付失败，请联系工作人员')
                    }
                }
            );
        }
    }
}
</script>

<style>
html,body,.fillcontain{height: 100%;}
body, p{margin:0;}
.mallDetailsPerfecth5Wrapper{height:100%; background: #f2f2f2;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper{padding:0 .2rem; background: #ffffff; margin-bottom: .2rem;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .goodsInfo{display: flex; padding:.2rem 0; border-bottom: .01rem solid #f2f2f2;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .goodsInfo .imgBox{flex: 0 0 1.5rem; height: 1.5rem; text-align:center; line-height: 1.5rem; margin-right: .2rem;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .goodsInfo .imgBox img{max-width: 1.5rem; max-height: 1.5rem;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .goodsInfo .goods{flex:0 0 5.28rem; font-size: 0;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .goodsInfo .goods .title{font-size: .28rem; line-height: .4rem; color: #333; margin-bottom: .2rem;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .goodsInfo .goods .discount{font-size: .36rem; color: #FF0040; }
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .skuInfo{height: .86rem; font-size: .28rem;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .skuInfo span{float:left; margin-top:.3rem;}
.mallDetailsPerfecth5Wrapper .tradeContentWrapper .skuInfo span.skuDetail{float:right;}

.mallDetailsPerfecth5Wrapper .addressWrapper{padding: 0 .2rem; background: #ffffff; box-sizing: border-box; margin-bottom: .25rem;}
.mallDetailsPerfecth5Wrapper .addressWrapper .formItem{border-bottom: .01rem solid #f2f2f2; font-size: 0; padding-bottom:.01rem;}
.mallDetailsPerfecth5Wrapper .addressWrapper .formItem:last-child{border-bottom: none;}
.mallDetailsPerfecth5Wrapper .addressWrapper .formItem label{font-size: .28rem; display: inline-block; width: 1.9rem;}
.mallDetailsPerfecth5Wrapper .addressWrapper .formItem input,
.mallDetailsPerfecth5Wrapper .addressWrapper .formItem textarea{font-size: .28rem; background: #fff; height: .8rem; width: 5rem; border:none; outline:none;}
.mallDetailsPerfecth5Wrapper .addressWrapper .formItem textarea{width: 100%; height: 1.4rem; padding-top: .3rem;}

.mallDetailsPerfecth5Wrapper .feeWrapper{padding: 0 .2rem; background: #ffffff; margin-bottom: 1rem;}
.mallDetailsPerfecth5Wrapper .feeWrapper .pItem{display: flex; font-size: 0; border-bottom: .01rem solid #f2f2f2; height: .85rem; line-height: .85rem;}
.mallDetailsPerfecth5Wrapper .feeWrapper .pItem:last-child{border-bottom: none;}
.mallDetailsPerfecth5Wrapper .feeWrapper .pItem .label{flex: 0 0 3.2rem; font-size: .28rem;}
.mallDetailsPerfecth5Wrapper .feeWrapper .pItem .label span{font-size: .24rem; }
.mallDetailsPerfecth5Wrapper .feeWrapper .pItem .content{flex: 1; text-align: right; font-size: .28rem;}

.mallDetailsPerfecth5Wrapper .totalInfoWrapper{position:fixed; bottom: 0; left: 0; display: flex; background: #ffffff; width: 100%; height: 1rem;}
.mallDetailsPerfecth5Wrapper .totalInfoWrapper .info{flex: 1; padding-left: .2rem; font-size: .32rem; line-height: 1rem;}
.mallDetailsPerfecth5Wrapper .totalInfoWrapper .confirmTrade{flex: 0 0 2.5rem; background: #FF0040; color: #fff; text-align: center; height: 1rem; line-height: 1rem; font-size: .36rem; font-weight: 500;}

@font-face {
    font-family: 'iconfont';
    /* project id 985335 */
    src: url('https://at.alicdn.com/t/font_985335_m1xa3owqusm.eot');
    src: url('https://at.alicdn.com/t/font_985335_m1xa3owqusm.eot?#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_985335_m1xa3owqusm.woff2') format('woff2'),
        url('https://at.alicdn.com/t/font_985335_m1xa3owqusm.woff') format('woff'),
        url('https://at.alicdn.com/t/font_985335_m1xa3owqusm.ttf') format('truetype'),
        url('https://at.alicdn.com/t/font_985335_m1xa3owqusm.svg#iconfont') format('svg');
}

.layerMaskPopup{position:fixed; top:0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.2); z-index:100;}
.payMoneyTrue {position: fixed; top:  2.6rem; left: .8rem; background: #FFFFFF; width: 5.9rem; height: 6rem; border-radius: .1rem; z-index: 200;}

.payMoneyOne {font-size: .28rem; font-weight: 500; color: #333333; text-align: center; padding-top: .4rem;}

.payMoneyTwo {font-size: .24rem; font-weight: 500; color: #999999; text-align: center; padding-top: .2rem;}

.payMoneyThree {font-size: .56rem; font-weight: 500; color: #333333; text-align: center; padding-top: .4rem;}

.payMoneyFour {padding-top: .8rem;}

.icon-payMoneyFourTrue {font-family: iconfont; color: #E6E6E6; font-size: .3rem; float: left; padding: .05rem .2rem 0 .68rem;}

.icon-payMoneyFour {font-family: iconfont; font-size: .44rem; color: #E7943C; float: left; padding-right: .26rem;}

.payMoneyFourMoney {font-size: .28rem; font-weight: 500;color: #333333;}

.payMoneyFive {padding-top: .6rem;}

.icon-payMoneyFive {font-family: iconfont; font-size: .4rem; float: left; color: #1AAD19; padding-right: .26rem;}

.payMoneyFiveMoney {font-size: .28rem; font-weight: 500; color: #333333;}

.payMoneyOkBtn {margin: 1rem auto 0 auto; font-size: .28rem; width: 4.7rem; background: rgba(255, 0, 64, 1); box-shadow: 0px 3px 4px 0px rgba(255, 0, 64, 0.3); border-radius: .1rem; text-align: center; color: #FFFFFF; padding: .2rem 0;}

.iconTrueColor {color: #FF0040;}

.toast {
    position: fixed;
    z-index: 2000;
    left: 50%;
    top:45%;
    transition:all .5s;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    border-radius: .05rem;
    color:#FFF;
    background: rgba(17, 17, 17, 0.7);
    height: .45rem;
    line-height: .45rem;
    padding: 0 .15rem;
    max-width: 3.50rem;
    font-size: .28rem;
}
</style>
